<template>
	<view class="bonfire-detail">

		<view class="info">
			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#ffffff">
				</uni-icons>
			</view>

			<view class="title">
				{{bonfireInfo.title}}
			</view>
			<view class="description">
				<view v-html="bonfireInfo.introduction"></view>
			</view>
		</view>

		<view class="footer">
			
			<view class="footer-item">
				<view class="footer-button" @click="toShareBonfire()">
					<uni-icons type="redo" size="25" color="#ffffff"></uni-icons>
				</view>
			</view>
			
			<view class="footer-item">
				<view class="footer-button" @click="createPost()">
					<uni-icons type="heart" size="25" color="#ffffff"></uni-icons>
				</view>
			</view>
			
			<view class="footer-item">
				<view class="footer-button" style="padding: 0 100rpx;" @click="createPost()">
					加入篝火
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bonfireInfo: {
					id: "",
					title: "海边畅想记",
					description: "十二月，冬日暖阳下，时光静美，情怀悠然",
					introduction: `人到中年，在安静中体悟人生<p><br></p><p>十二月，冬日暖阳下，时光静美，情怀悠然，淡淡牵盼，在这静谧的时光里，喜欢依着心的脉络，依心而行，一盏茶香，深情盈满。</p><p><br></p><p><img src="https://thumbor.dahe.cn/picture/RzFzTlhzNmFvck5paFhQZ19HMGtvMzR3ZTlnPS9odHRwcyUzQS8vbW1iaXoucXBpYy5jbi9tbWJpel9qcGcvVXh0aWNkbWlieUJETzcyZ0JkVUh4ZjRLYTFJbHVOcnhVOTZveFo0TVZmVDRKOWVmTzdhc2sxbktHRmxXaEhpYkZGQ2o1SHNtV25CaEMwa3Z2WjBKNllsVmcvNjQwJTNGd3hfZm10JTNEanBlZw==" alt="眉湖小屋" data-href="" style="width: 100%;"/></p><p><br></p><p>暖暖的气息，柔情似水流淌，绵长了岁月，静美了时光，也模糊了窗外冬日的风景。</p><p><br></p><p>只要心中温暖，就会拥有一份美好的期待，只有心中有爱，生活就会诗意盎然。</p><p><br></p>`,
					background: "https://ts1.cn.mm.bing.net/th/id/R-C.01879d30c67fcc7d56b3c6a444a6cb20?rik=H2G9lvgZ7fj8yw&riu=http%3a%2f%2fsnowcoal.com%2fIMAGES_9532%2f201411%2f1416468166215.jpg&ehk=ptavJ5%2bvSyTplBvOgIHKOD0pWaTCqMoE%2fHmLxtgHN2k%3d&risl=&pid=ImgRaw&r=0",
					postCount: 286,
				},
				
				paddingTop:null
			}
		},
		onLoad(options) {
			var bonfireId = options.bonfireId
			this.getBonfireInfo(bonfireId)
			
			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		methods: {
			getBonfireInfo(bonfireId) {

			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		
	}

	.bonfire-detail {
		
		background: url("https://www.cdn.kxcdedu.top/image/default/12DBF1D867A64F9FB199C793CFCBEA8F-6-2.png") no-repeat;
		background-size: cover;
		height: 100vh;

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;

			.back-arrow {
				width: 100%;
				padding-top: 100rpx;
				
				// #ifdef H5
				padding-top: 40rpx;
				// #endif
				
				height: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}


			.title {
				color: #ffffff;
				font-size: 60rpx;
				margin-top: 100rpx;
				margin-left: 40rpx;
			}

			.description {
				margin: 40rpx;
				font-size: 36rpx;
				color: #e3e3e3;
			}

			.posts {
				width: 670rpx;
				height: 1060rpx;
				
				background-color: rgba(255, 255, 255,0.8);
				// box-shadow: 0px 0px 8px 5px #e8e8e8;
				margin-left: 40rpx;
				margin-top: 60rpx;
				border-radius: 10rpx;
				
				.content{
					width: 610rpx;
					height: 1000rpx;
					margin: 40rpx 30rpx;
					overflow-y: scroll;
				}


			}

		}

		.page-btns {
			display: flex;
			position: fixed;
			right: 100rpx;
			top: 200rpx;
			z-index: 10;
		}


		.footer {
			position: fixed;
			height: 130rpx;
			width: 100%;
			bottom: 0;
			z-index: 3;

			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: flex-end;

			.footer-item {
				margin-right: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;

				.text {
					font-size: 46rpx;
					font-weight: bold;

				}

				.footer-button {
					padding: 0 20rpx;
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: rgba(208, 208, 208, 0.5);
					border-radius: 50rpx;
					color: white;
				}
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
